<template>
  <div class="page">
		<van-nav-bar
			:fixed="true" 
			:placeholder="true"
			:border="false"
			:title="title"
			left-arrow
			@click-left="$router.goBack()"
		></van-nav-bar>
		<div class="content">
			<div class="text_box">
				<textarea class="text" placeholder="请在这里输入反馈内容" v-model="content"></textarea>
				<span class="num">{{content.length}}/{{max_content_num}}</span>
			</div>
			<div class="file">
				<div class="title">上传凭证（不得超过{{max_file_num}}张）</div>
				<van-uploader 
					class="u_file" 
					upload-icon="plus" 
					:after-read="afterRead" 
					v-model="fileList" 
					multiple 
					:max-count="max_file_num" 
				/>
			</div>
			<button class="btn">提交</button>
		</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
			title: '意见反馈',
			max_file_num: 3,
			max_content_num: 200,
			content: '',
			fileList: [],
    }
  },
	watch: {
		content (){
			if(this.content.length > this.max_content_num){
				this.content = String(this.content).slice(0, this.max_content_num)
			}
		}
	},
  computed: {
  },
  methods: {
		afterRead(file){
			// 此时可以自行将文件上传至服务器
			console.log(file);
		}
  },
  mounted () {

  }
}
</script>

<style scoped lang="scss">
	@import '~styles/theme';
	/deep/ .van-nav-bar{
		.van-icon{
			color: #333;
			font-size: 20px;
		}
	}
	.content{
		.text_box{
			background-color: #fff;
			margin-bottom: 10px;
			.text{
				border: none;
				background-color: transparent;
				width: calc(100% - 40px);
				padding: 10px 20px;
				min-height: 88px;
				border-radius: 0;
			}
			.num{
				text-align: right;
				color: #aaa;
				display: block;
				padding-bottom: 10px;
				margin-right: 20px;
			}
		}	
		.file{
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: flex-start;
			padding: 18px 13px;
			.title{
				text-align: left;
				color: #aaa;
				margin-bottom: 13px;
				font-size: 12px;
			}
		}
		.u_file{
			text-align: left;
		}
		.btn{
			margin-top: 27px;
			color: #fff;
			border: none;
			border-radius: 8px;
			width: 335px;
			height: 44px;
			line-height: 44px;
			font-size: 16px;
			background-color: $theme_color;
		}
	}
</style>
